<template>
	<div id="role">
		<!-- 输入框子 -->
		<el-row class="role-head">
			<el-input placeholder="请输入角色名称" v-model="inpName"></el-input>
			<el-button type="primary" icon="el-icon-search" @click="searchUser">查询</el-button>
			<el-button type="primary" icon="el-icon-edit" @click="addUSer">添加</el-button>
		</el-row>
		<template>
			<el-table :key="Math.random()" :data="tableData" style="width: 100%" border
				:header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign:'center'}">
				<el-table-column label="角色名称" prop="name" sortable>
				</el-table-column>
				<el-table-column label="说明" prop="desc">
				</el-table-column>
				<el-table-column align="right" label="操作">

					<template slot-scope="scope">
						<el-button type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
						<el-button type="primary" @click="moreAuthorize(scope.$index, scope.row)">授权</el-button>

					</template>
				</el-table-column>
			</el-table>
		</template>
		<template>
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</template>
		<template>
			<!-- 对话框 -->
			<el-dialog title="创建" :visible.sync="dialogFormVisible">
				<el-form :model="form" :rules="rules" status-icon ref="form">
					<el-form-item prop="roleName" label="角色名称" :label-width="formLabelWidth"
						style="font-weight: bolder;font-size: 18px;">
						<el-input class="ins" v-model="form.roleName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="说明" :label-width="formLabelWidth" style="font-weight: bolder;font-size: 18px;">
						<el-input class="ins" v-model="form.desc" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
				</div>
			</el-dialog>


		</template>

		<template>
			<!-- 编辑对话框 -->
			<el-dialog title="编辑" :visible.sync="dialogFormVisible2">
				<el-form :model="form2" :rules="rules2" status-icon ref="form2">
					<el-form-item prop="roleName" label="角色名称" :label-width="formLabelWidth"
						style="font-weight: bolder;font-size: 18px;">
						<el-input class="ins" v-model="form2.roleName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="说明" :label-width="formLabelWidth" style="font-weight: bolder;font-size: 18px;">
						<el-input class="ins" v-model="form2.desc" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible2 = false">取 消</el-button>
					<el-button type="primary" @click="submitForm2('ruleForm')">确 定</el-button>
				</div>
			</el-dialog>
		</template>

		<template>

		</template>


		<template>
			<!-- 编辑对话框 -->
			<el-dialog title="权限控制" :visible.sync="dialogFormVisible3">
				<!-- 权限控制 ，弹出授权框-->
				<el-tree :data="data" show-checkbox :default-checked-keys="dataArry" node-key="id" ref="tree"
					highlight-current :props="defaultProps">
				</el-tree>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible3 = false">取 消</el-button>
					<el-button type="primary" @click="submitForm3('ruleForm')">确 定</el-button>
				</div>
			</el-dialog>
		</template>





	</div>

</template>

<script>
	import {
		allUser,
		addUser,
		delUser,
		upUser,
		powerUser,
		morePower
	} from '../../https/system.js'
	export default {
		data() {
			// 对表单数字进行验证
			var validateName = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('不能为空'));
				} else {
					// console.log("")
					callback();
				}
			};


			return {
				//roleAdd
				roleAdd: '',
				//当前页
				page: 1,
				//每页的限制
				limit: 0,
				//页码总数
				pages: 1,
				// 条数
				total: 0,
				// 搜索框的数据
				inpName: '',
				// 每个管理员的id
				id: '',
				// roleid
				roleId: '',

				tableData: [],
				// 分页页数
				// currentPage4: ,
				search: '',
				dialogFormVisible: false,
				dialogFormVisible2: false,
				dialogFormVisible3: false,
				// dialog的表单
				form: {
					roleName: '',
					delivery: false,
					desc: ''
				},
				// 表单的校验规则
				rules: {
					roleName: [{
						validator: validateName,
						trigger: 'blur',
						required: true
					}],

				},
				form2: {
					roleName: '',
					delivery: false,
					desc: ''
				},
				// 表单的校验规则
				rules2: {
					roleName: [{
						validator: validateName,
						trigger: 'blur',
						required: true
					}],

				},

				formLabelWidth: '120px',
				// 系统参数
				data: [],
				// 默认被选中的
				dataArry: [],
				defaultProps: {
					children: 'children',
					label: 'label'
				},
			}
		},
		methods: {
			open1() {
				this.$notify({
					title: '成功',
					message: '成功添加角色',
					type: 'success'
				});
			},
			open2() {
				this.$notify({
					title: '成功',
					message: '成功删除角色',
					type: 'success'
				});
			},
			open3() {
				this.$notify({
					title: '成功',
					message: '成功更新角色',
					type: 'success'
				});
			},
			open4() {
				this.$notify({
					title: '失败',
					message: '角色添加失败',
					type: 'error'
				});
			},
			moreAuthorize(index, row) {
				// 授权
				this.dialogFormVisible3 = true
				this.powerRequest(row.id)
				// 将id传递给roleid
				this.roleId = row.id


			},
			// getCheckedKeys() {
			// 	console.log(this.$refs.tree.getCheckedKeys(),"我是被选中的节点");
			// },

			handleEdit(index, row) {
				// 编辑管理员
				console.log(index, row);
				// 编辑里面是有字样的
				this.form2.roleName = row.name
				this.form2.desc = row.desc
				// 再来调用编辑弹出框方法
				this.dialogFormVisible2 = true
				// 调用更新的接口
				this.id = row.id.toString()
				// console.log("用户的id", this.id)
				// console.log(typeof this.id)
			},
			handleDelete(index, row) {
				// 删除数据
				console.log("执行删除")
				let id = row.id.toString()
				// console.log(typeof id)
				this.deleteUser(id, row.name, row.desc)
				// console.log(index, row);
				// 再次调用数据
				this.userRequest('')
				// 弹出删除信息
				this.open2()

			},
			handleSizeChange(val) {
				// 分页操作代码,就是准备显示多少条代码
				console.log(`每页 ${val} 条`);
				// 这里也是调用数据
				this.userRequest('', val)


			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				// 这里调用数据
				this.userRequest(val, this.limit, '', '', '')
				// 这里调用假数据
				this.page = val
			},
			searchUser() {
				// 搜索用户
				// 调用接口搜索框
				this.userRequest('', '', this.inpName, '', '')


			},
			//添加管理员弹框
			addUSer() {
				// console.log("弹框触发了")
				// 控制弹框的隐藏和显示
				this.dialogFormVisible = true


			},

			submitForm() {
				// 表单的提交
				this.$refs.form.validate((valid) => {
					if (valid) {

						// 这里进行数据的增加请求
						this.dialogFormVisible = false
						this.addRoleReq(this.form.roleName, this.form.desc)
						// 进行成功提示
						/* 这里就是数据的清除操作,避免第二次使用的时候出现上一次的添加 */
						this.form.roleName = "",
							this.form.desc = ""
						// 再次请求数据
						this.userRequest('')

					} else {
						alert("error")
						return false
					}

				})

			},
			submitForm2() {
				// 表单的提交
				this.$refs.form2.validate((valid) => {
					if (valid) {
						// 这里进行数据的增加请求
						// console.log("校验的东西",valid)
						this.dialogFormVisible2 = false
						this.updateRequest(this.id, this.form2.roleName, this.form2.desc)
						// 再次请求数据
						this.userRequest('')
						// 进行成功提示

						this.open3()

					} else {
						alert("error")
						return false
					}

				})

			},
			submitForm3() {
				// 这里实现角色的授权啊
				// 首先获得点击选中的下标
				this.dialogFormVisible3 = false
				// 提交的时候进行操作，获取所有的被选中的节点
				console.log(this.$refs.tree.getCheckedKeys(), "我是被选中的节点");
				let permissions = this.$refs.tree.getCheckedKeys()
				// 调用接口
				this.rolePower(this.roleId, permissions)

			},
			userRequest(page, limit, name, sort, order) {
				// 用户的数据进行请求
				let params = {
					page: page,
					limit: limit,
					name: name,
					sort: sort,
					order: order
				}
				allUser(params).then((res) => {
					// 成功之后进行回调
					console.log(res.data.data, "我是测试")
					this.tableData = res.data.data.list
					// 当前页数
					this.page = res.data.data.page
					// 总页数
					this.pages = res.data.data.pages
					// 限制条数
					this.limit = res.data.data.limit
					//总条数
					this.total = res.data.data.total
					// console.log(this.total,"总数")
					// console.log(this.limit,"限制条数")
					// console.log(this.pages,"总页数")
					// console.log(this.page,"当前页数")

				}).catch((error) => {
					console.log("失败")
				})
			},
			addRoleReq(name, desc) {
				// 添加管理员
				let params = {
					name: name,
					desc: desc
				}
				addUser(params).then((res) => {
					// 成功之后进行回调
					// 	console.log(this.tableData)
					// // console.log(res.data.data, "我是添加后的tableData")
					// console.log(typeof (res.data.data))
					// 进行刷新

					console.log(res, '成功')
					console.log(res.data, '成功数据')
					if (res.data.errmsg === "角色已经存在") {
						this.open4()
						console.log(this.roleAdd, '我是测试添加')
					} else if (res.data.errmsg == "系统内部错误") {
						this.open4()
					} else {
						this.open1()
					}
					// if(res.data.errmsg==="角色已经存在"){

					// }

					console.log("success")
				}).catch((error) => {
					console.log("添加失败", error)
				})

			},
			deleteUser(id, name, desc) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					// 删除角色再重新渲染
					let params = {
						id: id,
						name: name,
						desc: desc
					}
					delUser(params).then((res) => {
						// 成功之后进行回调
						console.log(res.data, "我是删除")
						console.log("success")
						this.userRequest()
					}).catch((error) => {
						console.log("删除失败")
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});

				})





			},

			// 更新管理员
			updateRequest(id, name, desc) {
				// 进行管理员的更新操作
				let params = {
					id: id,
					name: name,
					desc: desc
				}
				upUser(params).then((res) => {
					// 成功之后进行回调
					console.log(res.data, "我是更新")
					// this.tableData = res.data.data.list
					console.log("success")
					this.userRequest()

				}).catch((error) => {
					console.log("更新失败")
				})

			},
			// 授权管理
			powerRequest(roleId) {

				let params = {
					roleId: roleId
				}
				powerUser(params).then((res) => {
					// 成功之后进行回调
					console.log(res.data, "我是授权")
					this.data = res.data.data.systemPermissions
					this.dataArry = res.data.data.assignedPermissions

					console.log("success")
				}).catch((error) => {
					console.log("授权失败")
				})

			},
			// 给角色赋予权限
			rolePower(roleId, permissions) {
				let params = {
					roleId: roleId,
					permissions: permissions
				}
				morePower(params).then((res) => {
					// 成功之后进行回调
					// console.log(res.data, "我是准备授权")
					console.log(res, "我是准备授权2")

					// 授权之后需要将参数传递到defaultkeys上

					// this.data = res.data.data.systemPermissions
					// this.dataArry=res.data.data.assignedPermissions
					// console.log("success")
				}).catch((error) => {
					console.log("角色授权失败", error)
				})


			},



		},
		mounted() {
			// 这里进行数据的请求
			this.userRequest()
		},
	}
</script>

<style scoped="scoped">
	#role el-table {
		/* 这个就是 */
		text-align: center !important;
	}

	/deep/.el-table__header-wrapper {
		line-height: 50px !important;

	}
	.role-head .el-input {
		width: 200px !important;
		margin-right: 10px;
	}
	.role-head {
		margin-bottom: 15px;
		min-width: 500px;
		overflow: hidden;
	}

	.block {
		margin-top: 20px;
	}

	.ins {
		width: 300px;
	}
</style>
